<!-- 新建 SoftwareInfoDrawer.vue -->
<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});

const emit = defineEmits(['update:visible']);

const softwareInfo = ref({
    name: '签到软件',
    version: '测试版',
    versionNumber: '1.0.8',
    copyright: '-',
    activationTime: '2025-02-18 09:29:02',
    expirationTime: '2025-02-19 09:29:02',
    unboundCount: 0,
    remainingUnbounds: 2
});

// 统一关闭方法
const closeDrawer = () => {
    emit('update:visible', false);
};

// 检查更新（可接收父组件回调）
const checkForUpdate = () => {
    ElMessage.info('已是最新版本');
};

// 解绑操作（可emit事件）
const handleUnbind = () => {
    ElMessageBox.confirm('确定要解除绑定吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        ElMessage.success('解绑成功');
        // 可在此emit事件到父组件：emit('unbind-success')
    });
};
</script>

<template>
    <el-drawer :model-value="visible" @update:model-value="closeDrawer" title="软件信息" direction="rtl" size="40%">
        <div class="software-info-content">
            <p>软件名称: {{ softwareInfo.name }}</p>
            <p>软件版本: {{ softwareInfo.version }}</p>
            <p>版本号: {{ softwareInfo.versionNumber }}</p>
            <el-button type="primary" @click="checkForUpdate">检查更新</el-button>
            <p>版权归属: {{ softwareInfo.copyright }}</p>
            <p>激活时间: {{ softwareInfo.activationTime }}</p>
            <p>过期时间: {{ softwareInfo.expirationTime }}</p>
            <p>已解绑: {{ softwareInfo.unboundCount }}次</p>
            <p>可解绑: {{ softwareInfo.remainingUnbounds }}次</p>
            <el-button type="danger" @click="handleUnbind" :disabled="softwareInfo.remainingUnbounds === 0">
                解绑软件
            </el-button>
        </div>
    </el-drawer>
</template>

<style scoped>
.software-info-content {
    padding: 20px;
    line-height: 2;
}

/* ...保留原有样式... */
</style>